
// 封装组件 props+slot 
// 轮播页面  
import MySwipe from "./MySwipe"
import {ajax} from "~/request"

export class Banner extends Component{
  state = {
    imgs:[
      require("@/assets/images/img1.jpg"),   // default 
      require("@/assets/images/img2.jpg"),
      require("@/assets/images/img3.jpg"),
      require("@/assets/images/img4.jpg"),
    ],
    list:[]
  }
  componentDidMount(){
    console.log(this.state)
    ajax.get("http://47.104.209.44:3333/banner")
      .then(res=>{
        console.log(res)
        this.setState({
          list:res.data.banners
        })
      })
  }


  render(){
    const {imgs,list} = this.state;
    return (
      <div>
        <h2> Banner - 自定义封装轮播  </h2>  
        <MySwipe id="box" >
            {
              imgs.map((l,i)=>{
                return (
                  <MySwipe.Item key={i}>
                    <img src={l.default}  style={{width:'100%',height:280}} alt=""/>
                  </MySwipe.Item>
                )
              })
            }
        </MySwipe>
        <MySwipe id="box2"
          options={{  
            loop:true,
            autoplay:true,
            speed:3000, 
            observer:true // 重新实例化
          }}
        >
            {
              list.map((l,i)=>{
                return (
                  <MySwipe.Item key={i}>
                      <img src={l.imageUrl}  style={{width:'100%',height:280}} alt=""/>
                  </MySwipe.Item>
                  // <div className="swiper-slide" key={i} >
                  //   <img src={l.imageUrl}  style={{width:'100%',height:280}} alt=""/>
                  // </div>
                )
              })
            }
        </MySwipe>
      </div>
    )
  }
}